
<template>
	<div class="login-bg">
		<div class="bg-section">
			<img :src="logoText" class="logo-text-1" alt="">
			<img :src="logoText" class="logo-text-2" alt="">
			<div class="slogan-text-1">Every child is an Art CEO</div>
			<div class="slogan-text-2">Every child is an Art CEO</div>
		</div>
		<div class="form-card">
			<img style="width:50%;margin-bottom:30px" :src="logo" mode="" />
			<div class="divider">后台管理系统</div>
			<a-form :rules="formRules" :model="form" class="form-box" @finish="onSubmit" >
				<a-form-item required name="username">
					<a-input placeholder="请输入手机号" v-model:value="form.username" class="custom-input"></a-input>
				</a-form-item>
				<a-form-item required name="password" v-if="loginType==1">
					<a-input-password placeholder="请输入密码" v-model:value="form.password" class="custom-input" password></a-input-password>
					<div style="text-align:right;margin-top:10px"><a href="javascript:;" @click="loginType=loginType==1?2:1">验证码登录</a></div>
				</a-form-item>
				<a-form-item required name="phone" v-if="loginType==2">
					<a-input placeholder="请输入验证码" v-model:value="form.phone" class="custom-input">
						<template #suffix>
							<a-button type="primary" shape="round" size="large">
								获取验证码
							</a-button>
						</template>
					</a-input>
					<div style="text-align:right;margin-top:10px"><a href="javascript:;" @click="loginType=loginType==1?2:1">密码登录</a></div>
				</a-form-item>
				<a-form-item required >
					<a-button type="primary" shape="round" size="large" block style="height:60px;margin-top:50px" @click="onSubmit">
						登录
					</a-button>
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>

<script lang="ts">
import logo from '../../assets/images/ARTCEO_LOGO_02.png'
import logoText from '../../assets/images/ARTCEO_TEXT.png'
import LoginController from './login'
import { ref } from 'vue'
import { useStore } from 'vuex'
export default {
	setup(){

		const loginController:LoginController=new LoginController(useStore());
		const {form,formRules,loading}=loginController.getState()
		const {setRemember,onSubmit}=loginController.getMethods()

		let loginType=ref(1)

		return {
			form,
			formRules,
			loading,
			setRemember,
			onSubmit,
			logo,
			logoText,
			loginType
		}
	}
}
</script>

<style lang="scss" scoped>
@import '@/styles/theme.scss';
.login-bg{
	height: 100vh;
	width: 100vw;
	position: relative;
	overflow: hidden;
	background: #EFEFEF;
	.bg-section{
		height: 50%;
		width: 100%;
		background: $theme-color;
		border-bottom-right-radius: 50%;
		border-bottom-left-radius: 50%;
		position: relative;
		.logo-text-1{
			width: 700px;
			opacity: 0.3;
			position: absolute;
			top: 80px;
			left: 50px;
		}
		.logo-text-2{
			width: 400px;
			opacity: 0.3;
			position: absolute;
			bottom: 80px;
			right: 80px;
		}
		.slogan-text-1{
			font-size: 36px;
			color: #fff;
			opacity: 0.5;
			position: absolute;
			bottom: 80px;
			left: 10%;
		}

		.slogan-text-2{
			font-size: 28px;
			color: #fff;
			opacity: 0.5;
			position: absolute;
			top: 80px;
			right: 10%;
		}
	}
	.form-card{
		width: 480px;
		height: 600px;
		border-radius: 20px;
		background: #fff;
		box-shadow: 0px 6px 16px -8px rgba($color: #000000, $alpha: 0.08);
		position: absolute;
		z-index: 2;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		padding: 60px;
		display: flex;
		flex-direction: column;
		align-items: center;
		.divider{
			color: $theme-dark-color;
			font-size: 24px;
			font-weight: bold;
			display: flex;
			align-items: center;
			&::before{
				display: inline-block;
				content: "";
				height: 2px;
				width: 24px;
				background: $theme-dark-color;
				margin-right: 10px;
			}
			&::after{
				display: inline-block;
				content: "";
				height: 2px;
				width: 24px;
				background: $theme-dark-color;
				margin-left: 10px;
			}
		}
		.form-box{
			width: 100%;
			margin-top: 50px;
			:deep(div[role=alert]){
				padding-left: 16px;
			}
			:deep(.ant-form-item){
				margin-bottom: 24px;
				min-height: 84px;
			}
			:deep(.ant-input){
				font-size: 18px;
			}
		}
		.custom-input{
			height: 60px;
			width: 100%;
			border-radius: 60px;
			border: 2px solid $theme-dark-color;

		}
	}
}
</style>
